<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>028-组件-x-template模版.html</title>
</head>
<body>
	<div id="app">
		<button-counter></button-counter>
		<button-counter></button-counter>
		<button-counter></button-counter>
		<button-counter></button-counter>
	</div>
	<!--模版需要写在挂载组件的外面-->
	<script type="text/x-template" id="button-counter">
		<button @click="count++">点击{{ count }}了</button>
	</script>
</body>
<script src="js/vue.js"></script>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
		
		},
		components:{
			'button-counter':{
				data(){
					return {
						count:0
					}
				},
				template:'<button @click="count++">点击了{{ count }}次.</button>'
			}
		}
})
</script>
</html>